<template>
  <div>
    <!-- 该组件是为了实现请求进度条的实现 -->
    <el-button type="primary" @click="click">请求进度条</el-button>
  
    <el-dialog
    v-model="dialogVisible"
    width="200"
    :before-close="handleClose"
    :show-close="false"
  >
  <div class="dialog-footer">
    <div class="progress-container">
      <el-progress type="dashboard" :percentage="progress">
        <template #default="{ percentage }">
          <span class="percentage-value">{{ percentage }}%</span>
        </template>
      </el-progress>
    </div>
  </div>
  </el-dialog>
  </div>
</template>

<script>
import { postProgress } from "@/api/progress";
import { mapState, mapActions } from 'vuex';
export default {
  computed: {
    ...mapState(['progress'])
  },
  data() {
    return {
      dialogVisible:false
    };
  },
 methods:{
   ...mapActions(['updateProgress']),
   async click(){
    try{
      this.dialogVisible = true;
      await  postProgress({ data: { offset: 0, count: 20, no_content: 0 } }, (percentCompleted) => {
        console.log(percentCompleted);
        
        this.updateProgress(percentCompleted);
      }) 
      console.log('请求完成');
       // 使用 setTimeout 等待两秒钟
       await new Promise(resolve => setTimeout(resolve, 2000));
      this.dialogVisible = false;
      this.updateProgress(0)
    }catch(error){
      console.log(error);
    }
  }
 }

}
</script>

<style>

</style>